<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5-4使用样式绑定实现表格</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 5px;
        }

        .dark {
            background-color: #8F9AA5;
        }
    </style>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <table>
            <tr :class="{dark:true}">
                <td><b>型号</b></td>
                <td><b>品牌</b></td>
                <td><b>出产年份</b></td>
                <td><b>驱动类型</b></td>
            </tr>
            <tr>
                <td>帝豪</td>
                <td>吉利</td>
                <td>2022</td>
                <td>汽油车</td>
            </tr>
            <tr :class="{dark:true}">
                <td>宋PLUS</td>
                <td>比亚迪</td>
                <td>2021</td>
                <td>电动车</td>
            </tr>
            <tr>
                <td>问届M7</td>
                <td>华为</td>
                <td>2023</td>
                <td>电动车</td>
            </tr>
            <tr :class="{dark:true}">
                <td>途观</td>
                <td>大众</td>
                <td>2019</td>
                <td>汽油车</td>
            </tr>
        </table>
    </div>
    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                
            },
            methods: {
                
            },
        }).mount("#app");
    </script>
</body>

</html>